<template>
  <div class="box">
    <div class="box-header">
      <a-space size="large">
        <div>
          <span class="item">
            链接名称
          </span>
          <a-icon type="snippets" theme="twoTone" class="icon-class" />
        </div>
        <div v-show="ifShowConnectFlag">
          <a-select v-model="listQuery.connectKey" class="select-class">
            <a-select-option v-for="item in connectOptions" :key="item.key" :value="item.key">{{ item.label }}</a-select-option>
          </a-select>
        </div>
        <div>
          <properties-button :connect-key="listQuery.connectKey" />
        </div>
        <div>
          <a-button type="primary" @click="openConnect()">
            开启链接
          </a-button>
        </div>
        <div>
          <a-button type="primary" @click="closeConnect()">
            断开链接
          </a-button>
        </div>
        <div class="prompt">
          <div class="prompt-text">
            <p>
              {{ this.promptText }}
            </p>
          </div>
          <a-icon v-show="ifConnectFlag" class="icon-class" theme="twoTone" two-tone-color="#55e716" type="api" />
          <a-icon v-show="!ifConnectFlag" type="api" theme="twoTone" two-tone-color="red" class="icon-class" />
        </div>
      </a-space>
    </div>
    <div class="box-body">
      <div class="box-body-aside">
        <subscribe :if-connect-flag="ifConnectFlag" :connect-key="listQuery.connectKey" />
      </div>
      <div class="box-body-main">
        <detailed-information />
      </div>
    </div>
  </div>

</template>

<script>
import { closeConnectByConnectKey, fetchConnectOptions, openConnectByConnectKey } from '@/api/connnect'
import PropertiesButton from '@/views/dashboard/admin/components/PropertiesButton'
import Subscribe from '@/views/dashboard/admin/components/Subscribe'
import DetailedInformation from '@/views/dashboard/admin/components/DetailedInformation'
export default {
  name: 'Connect',
  components: {
    DetailedInformation,
    Subscribe,
    PropertiesButton
  },
  data() {
    return {
      ifConnectFlag: false, // 状态是否链接
      promptText: '未连接', // 鼠标提示放在api图标显示内容
      connectOptions: null,
      listQuery: {
        connectKey: ''
      },
      ifShowConnectFlag: false // 头部连接名选择框是否显示
    }
  },
  mounted() {
    this.getConnectOptions()
  },
  methods: {
    // 切换连接状态
    switchState() { //  切换状态
      if (this.ifConnectFlag === false) {
        this.ifConnectFlag = true
        this.promptText = '已连接'
      } else {
        this.ifConnectFlag = false
        this.promptText = '未连接'
      }
    },
    // 开启链接
    openConnect() {
      if (this.ifConnectFlag === false) {
        openConnectByConnectKey(this.listQuery).then(() => {
          this.switchState()
          this.$message.success('连接成功！！')
        })
      } else {
        this.$message.warning('已经连接了！！')
      }
    },
    // 关闭链接
    closeConnect() {
      if (this.ifConnectFlag === true) {
        closeConnectByConnectKey(this.listQuery).then(() => {
          this.switchState()
          this.$message.success('断开连接！！')
        })
      } else {
        this.$message.warning('已经断开连接了！！')
      }
    },
    //  获取连接名相关信息
    getConnectOptions() {
      fetchConnectOptions().then(response => {
        this.connectOptions = response.data.connectOptions

        // Just to simulate the time of the request
        setTimeout(() => {
          // this.listLoading = false
        }, 1.5 * 1000)
        this.ifShowConnectFlag = true
        this.listQuery.connectKey = this.connectOptions[0].key
      })
    }
  }
}
</script>

<style scoped>
/*整体*/
.box {
  font-size: 100%;
}
/*头部选择栏*/
.box-header{
  display: flex;
  padding: 0.3em;
  border: 0.2em solid #60a8e7;
  border-radius: 0.5em;
}
/*文字*/
.item {
  font-size: 1.5em;
}
/*所用图标*/
.icon-class {
  font-size: 2em;
}
/*选择框*/
.select-class {
  width: 12em;
}
/*链接api提示信息*/
.prompt {
  position: relative;
  display: inline-block;
}
/*链接api提示信息文字*/
.prompt .prompt-text {
  visibility: hidden;
  width: 4em;
  height: 2.5em;
  background-color: #fcce38;
  color: #ffffff;
  text-align: center;
  border-radius: 0.3em;
  padding: 0.3em 0;

  /* 定位工具提示 */
  position: absolute;
  z-index: 1;
  top: -1em;
  left: 105%;
}
/*链接api提示 鼠标放上信息文字*/
.prompt:hover .prompt-text {
  visibility: visible;
}
.modal{

}
.box-body{
  display: flex;
}
.box-body-aside {
  margin-top: 0.5em;
  flex: 1;
  border: 0.2em solid #72e760;
  border-radius: 0.8em;
  height: 60em;
}
.box-body-main {
  margin-top: 0.5em;
  margin-left: 0.5em;
  flex: 3;
  border: 0.2em solid #fd6e78;
  border-radius: 0.8em;
  height: 60em;
}
</style>
